<!--注册-->
<template>
  <div class="register">
    <div class="register__form">
      <h1 style="text-align: center">注册</h1>
      <el-form :model="formData" ref="formRef" @submit.prevent="handleSubmit" label-width="80px" :rules="formRules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名"/>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password" placeholder="请输入密码" show-password/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="formData.confirmPassword" placeholder="请确认密码" show-password/>
        </el-form-item>

        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="formData.phoneNumber" placeholder="请输入手机号"/>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱"/>
        </el-form-item>

        <el-form-item label="角色" prop="role">
          <el-select v-model="formData.role" placeholder="请选择角色">
            <el-option label="用户" value="1"></el-option>
            <el-option label="快递员" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
      <p class="register-link">已有帐户
        <RouterLink to="/login">去登录</RouterLink>
      </p>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage} from 'element-plus';
import {register} from '../services/api.js'; // 假设注册接口在这里
// 校验确认密码
const validateConfirmPassword = (rule, value, callback) => {
  if (value !== formData.value.password) {
    ElMessage.error('两次输入的密码不一致')
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

// 声明表单数据
const formData = ref({
  username: '',
  password: '',
  phoneNumber: '',
  email: '',
  role: '1', // 默认选择角色为普通用户
});
const formRef = ref(null);
// 表单验证规则
const formRules = {
  username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, message: '密码至少 6 个字符', trigger: 'blur'},
  ],
  confirmPassword: [
    {required: true, message: '请确认密码', trigger: 'blur'},
    {validator: validateConfirmPassword, trigger: 'blur'},
  ],
  phoneNumber: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur'},
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur'},
  ],
  role: [
    {required: true, message: '请选择角色', trigger: 'change'}, // 添加角色验证规则
  ],
};

// 提交表单数据
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交数据
      register(formData.value)
          .then(response => {
            if (response && response.code === 1) {
              ElMessage.success({message: '注册成功！', duration: 1000});
              formData.value = {username: '', password: '', phoneNumber: '', email: '', role: '1'}; // 重置表单
            } else {
              ElMessage.error(response.message || '注册失败');
              console.error('注册失败：', response.message);
            }
          })
          .catch(error => {
            // 注意：由于我们在 register 函数中 catch 了错误，并返回了一个对象，
            // 所以这里的 catch 实际上不会被触发，除非发生了其他未捕获的异常。
            console.error('注册时发生错误，请稍后再试:', error);
            ElMessage.error({message: '注册时发生错误，请稍后再试', duration: 1000});
          });
    } else {
      console.log('表单验证失败');
    }
  });
};
</script>

<style>
.register-link a {
  color: #007bff;
  text-decoration: none;
  text-align: center;
}

.register {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #209cff 0%, #68e0cf 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

.register__form {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}

.register__form:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.el-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 25px;
}

.el-button {
  width: 100%;
  transition: all .3s ease-in-out;
}

.el-button:hover {
  background-color: darken(#409EFF, 10%); /* 使用实际的Sass或类似的工具实现 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
</style>

